import React, { useState, useEffect } from 'react';
import styles from './style.less';
import { getLogin } from '../service';
import { LoginMessage } from '../data';

export default function Home(props: any) {
  // console.log(props, '=====');

  const [loginMessage, setLoginMessage] = useState<LoginMessage>({
    platformChannel: '',
    platformChannelStr: '',
    status: '',
    tgye: '',
    zrxf: '',
    mrys: '',
    dy: [],
    kfym: [],
    djcs: '',
    zxcs: '',
    xf: '',
    zxrs: ''
  });
  const params = props.location.query.id;

  useEffect(() => {
    getLogin(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setLoginMessage(res);
        // setTableData([]);
      }
    });
  }, []);

  return (
    <div className={styles.wrapperDetail}>
      <div className={styles.userDetail}>
        {/* 标题 */}
        <h2 className={styles.title}>
          <span>账户信息</span>
        </h2>
        {/* 账户信息详情 */}
        <div>
          <div className={styles.detail}>
            <div>
              <span className={styles.label}>推广余额：</span>
              <span>{loginMessage.tgye}</span>
            </div>
            <div>
              <span className={styles.label}>昨日消费：</span>
              <span>{loginMessage.zrxf}</span>
            </div>
            <div>
              <span className={styles.label}>每日预算：</span>
              <span>{loginMessage.mrys}</span>
            </div>
            <div>
              <span className={styles.label}>地域：</span>
              <span>{loginMessage.dy.map(item => { <span>{item}</span> })}</span>
            </div>
          </div>
          <div className={styles.detail}>
            <div>
              <span className={styles.label}>开放域名：</span>
              <span>{loginMessage.kfym.map(item => { <span>{item}</span> })}</span>
            </div>
          </div>
        </div>
      </div>
      {/* 下半部分信息 */}
      <div className={styles.censusDetail}>
        {/* 标题 */}
        <h2 className={styles.title}>
          <span>今日统计</span>
        </h2>
        {/* 统计详情 */}
        <div className={styles.detail}>
          <div>
            <span className={styles.label}>点击次数：</span>
            <span>{loginMessage.djcs}次</span>
          </div>
          <div>
            <span className={styles.label}>展现次数：</span>
            <span>{loginMessage.zxcs}次</span>
          </div>
          <div>
            <span className={styles.label}>消费：</span>
            <span>{loginMessage.xf}元</span>
          </div>
          <div>
            <span className={styles.label}>展现人数：</span>
            <span>{loginMessage.zxrs}人</span>
          </div>
        </div>
      </div>
    </div>
  );
}
